<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:51:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:12:46
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-bottom.vue
-->
<template>
    <div class="right_bottom">
        <div class="scroll-container" ref="scrollContainer">
            <dv-capsule-chart :config="config" style="width:100%;height:260px"/>
            <div ref="scrollObserver" class="scroll-observer"></div>
        </div>
    </div>
</template>

<script>
import {currentGET} from 'api/modules'

export default {
    data() {
        return {
            gatewayno: '',
            config: {
                showValue: true,
                unit: "万个",
                data: []
            },
            page: 1,
            loading: false,
            hasMore: true
        };
    },
    created() {
        this.getData()

    },
    computed: {},
    mounted() {
        //this.startScrolling();
    },
    beforeDestroy() {
        this.clearData()
    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },
        getData() {
            if (this.loading || !this.hasMore) return;
            this.pageflag = true
            // this.pageflag =false
            currentGET('centerMap1', {gatewayno: this.gatewayno}).then(res => {
                if (!this.timer) {
                }
                if (res.code == 200) {
                    const dataTo = res.data[0].dataList.slice(0, 7);
                    this.updateChart(dataTo)
                    this.startTimer(res.data[0].dataList);
                    console.log('报警排名数据',  res.data[0].dataList);

                    //this.switper()
                } else {
                    this.pageflag = false
                    this.srcList = []
                    this.$Message({
                        text: res.msg,
                        type: 'warning'
                    })
                }
            })
        },
        updateChart(data) {
            this.config = {
                ...this.config,
                data: data
            }
        },
        // 定义一个方法，用于定时从数据中循环取出5个数据并添加到图表配置中
        startTimer(res) {
            let index1 = 0;
            const interval = setInterval(() => {
                // 检查是否已经取完所有数据
                if (index1 + 7 > res.length) {
                    // 如果已经到达列表末尾，则重新从头开始
                    index1 = 0;
                }

                // 取出7个数据并添加到图表配置中
                const dataToAdd = res.slice(index1, index1 + 7);
                // 更新图表配置的数据
                this.updateChart(dataToAdd);
                index1 += 1; // 更新索引
            }, 2000); // 每两秒执行一次，可以根据需要调整间隔时间
        }

    },
};
</script>
<style lang='scss' scoped>
.list_Wrap {
  height: 100%;
  overflow: hidden;

  :deep(.kong) {
    width: auto;
  }
}

.sbtxSwiperclass {
  .img_wrap {
    overflow-x: auto;
  }

}

.right_bottom {
  box-sizing: border-box;
  padding: 0 16px;

  .searchform {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;

    .searchform_item {
      display: flex;
      justify-content: center;
      align-items: center;

      label {
        margin-right: 10px;
        color: rgba(255, 255, 255, 0.8);
      }

      button {
        margin-left: 30px;
      }

      input {
      }
    }
  }

  .img_wrap {
    display: flex;
    // justify-content: space-around;
    box-sizing: border-box;
    padding: 0 0 20px;
    // overflow-x: auto;

    li {
      width: 105px;
      height: 137px;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      // background: #84ccc9;
      // border: 1px solid #ffffff;
      overflow: hidden;
      flex-shrink: 0;
      margin: 0 10px;

      img {
        flex-shrink: 0;
      }
    }


  }

  .noData {
    width: 100%;
    line-height: 100px;
    text-align: center;
    color: rgb(129, 128, 128);

  }
}
</style>